<template>
    <view class="apply-list">
        <view class="apply-list-box">
            <view class="apply-list-title">
                诉求列表
            </view>
            <scroll-view scroll-y class="apply-list-content" >
                <view class="apply-item" @click="navigateTo('/subPackage/apply-detail?id='+item.id)" v-for="(item, index) in list">
                    <view class="apply-item_name">
                        <view>{{item.title}}</view>
                        <view>{{item.requestCode}}</view> 
                    </view>
                    <view class="apply-item-status">
                        {{stateFormat[item.status]}}
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { getList } from '@/api'
import { ref } from 'vue'
const list:any = ref([])
const typeOptions = {
    1: '合规建设指导',
    2: '合同纠纷',
    3: '劳动争议',
    4: '其他',
    5: '政法系统领导面对面',
    6: '审判监督',
    7: '法制体检',
    8: '法律援助',
    9: '公证服务',
    10: '检察听证',
    11: '其他'
}
const stateFormat = {
    0: '待受理',
    1: '受理中',
    2: '已完结'
}
const navigateTo = (url:any) => {
    uni.navigateTo({
        url: url
    })
}
const getOrderList = async () => {
    const params = {
        current: 1,
        size: 100
    }
    const res = await getList(params)
    console.log(res, 'res')
    list.value = res.records
}
getOrderList()
</script>

<style lang="scss" scoped>
    .apply-list{
        height: 100vh;
        width: 100vw;
        background: url('https://7072-prod-3gyndjxs02add8b0-1379203838.tcb.qcloud.la/static/img3.png') no-repeat left top;
        background-size: 100% 100%;
        padding: 24rpx;
        display: flex;
        .apply-list-box{
            flex: 1;
            margin-top: 72rpx;
            background: #f2f2f2;
            border-radius: 36rpx;
            display: flex;
            flex-direction: column;
            .apply-list-title{
                text-align: center;
                line-height: 96rpx;
                border-bottom: 1px #dcdddd solid;
                font-size: 36rpx;
                font-weight: bold;
            }
            .apply-list-content{
                flex: 1;
                .apply-item{
                    height: 96rpx;
                    border-bottom: 1px #dcdddd solid;
                    display: flex;
                    align-items: center;
                    .apply-item_name{
                        padding-left: 96rpx;
                        line-height: 1.1;
                        flex: 1;
                        color: #19428A;
                        font-size: 24rpx;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                    }
                    .apply-item-status{
                        padding: 0 24rpx;
                        background: #19428A;
                        color: #fff;
                        line-height: 54rpx;
                        height: 54rpx;
                        border-radius: 10rpx;
                        margin-right: 36rpx;
                    }
                }
            }
        }
    }
</style>